<!-- 标签容器 -->
<template>
  <div class="m__tag flex align-items-center" :style="renderStyles">
    {{ props.content }}
  </div>
</template>

<script lang="ts" setup>
/** JS */
import {ref, withDefaults, defineProps, Ref, watch} from 'vue';

interface TagPanel {
  content?: string
  backgroundColor?: string
  textColor?: string
  borderColor?: string
}

let props = withDefaults(defineProps<TagPanel>(), {
  backgroundColor: '#fafafa',
  textColor: '#000000',
  borderColor: '#d9d9d9'
});

let renderValues: Ref<TagPanel> = ref({
      content: props.content,
      backgroundColor: props.backgroundColor,
      textColor: props.textColor,
      borderColor: props.borderColor
    }),
    renderStyles = ref(`background-color: ${renderValues.value.backgroundColor};
      border: ${renderValues.value.borderColor} 1px solid;
      color: ${renderValues.value.textColor}`);

watch(props, (n) => Object.assign(n, renderValues), {deep: true});
</script>

<style lang="less" scoped>
.m__tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.4rem;
}
</style>
